<template>
  <div>
    <ul class="scroll-menu">
      <li v-for="(menu, i) in menus" :key="i" @click="toPath(menu.path)">
        <div class="my-menu">
          {{ menu.icon }} <span>{{ menu.name }}</span>
        </div>
      </li>
      <li>
        <el-dropdown placement="bottom">
          <el-avatar
            class="user-avatar"
            :size="36"
            style="margin-top: 12px"
            :src="
              $common.isEmpty(token)
                ? $store.state.webInfo.avatar
                : $store.state.userInfo.avatar
            "
          >
          </el-avatar>

          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              @click.native="$router.push({ path: '/user' })"
              v-if="!$common.isEmpty(token)"
            >
              <i class="fa fa-user-circle" aria-hidden="true"></i>
              <span>个人中心</span>
            </el-dropdown-item>
            <el-dropdown-item
              @click.native="logout()"
              v-if="!$common.isEmpty(token)"
            >
              <i class="fa fa-sign-out" aria-hidden="true"></i>
              <span>退出{{ $store.state.userInfo.username }}</span>
            </el-dropdown-item>
            <el-dropdown-item
              @click.native="toPath('/login')"
              v-if="$common.isEmpty(token)"
            >
              <i class="fa fa-sign-in" aria-hidden="true"></i>
              <span>登录</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menus: [],
      token: "",
    };
  },
  created() {
    this.getToken();
  },
  methods: {
    getToken() {
      this.token = localStorage.getItem("token");
    },
    getMenus() {
      this.$createHttp.getMenu().then((res) => {
        if (res.code === 200) {
          let list = [];
          res.data.map((menu) => {
            if (menu.component && menu.visible) {
              list.push(menu);
            }
          });
          this.menus = list;
          this.$emit("action", list);
        }
      });
    },
    toPath(url) {
      this.$router.push(url);
    },
    logout() {
      this.$createHttp
        .logout()
        .then(() => {
          this.$store.commit("userInfo", {});
          localStorage.removeItem("token");
          this.$message({
            message: "退出登录",
            type: "success",
          });
          setTimeout(() => {
            this.$router.push({ path: "/" });
          }, 1500);
        })
        .catch((error) => {
          this.$message({
            message: error,
            type: "error",
          });
        });
    },
  },
};
</script>

<style scoped>
.scroll-menu {
  margin: 0 25px 0 0;
  display: flex;
  justify-content: flex-end;
  padding: 0;
}

.scroll-menu li {
  list-style: none;
  margin: 0 12px;
  font-size: 17px;
  height: 60px;
  line-height: 60px;
  position: relative;
  cursor: pointer;
}

.scroll-menu li:hover .my-menu span {
  color: var(--themeBackground);
}

.scroll-menu li:hover .my-menu i {
  color: var(--themeBackground);
  animation: scale 1.5s ease-in-out infinite;
}

.scroll-menu li .my-menu:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  height: 6px;
  background-color: var(--themeBackground);
  width: 100%;
  max-width: 0;
  transition: max-width 0.25s ease-in-out;
}

.scroll-menu li:hover .my-menu:after {
  max-width: 100%;
}
</style>
